<template>
    <div class="chat-box" v-show="chat.chatType == 0">
        <div class="handler-box">
            <span v-if="conditionList[0]" class="title">约聊</span>
            <span v-else-if="conditionList[1]" class="title">约盟</span>
            <span v-else-if="conditionList[2]" class="title">约友</span>
            <span v-else-if="conditionList[3]" class="title">我</span>
            <div class="input-box" v-show="searchFlag">
                <n-input type="text" size="small" placeholder="搜好友"></n-input>
            </div>
            <n-button text class="right-icon" @click="searchFlag = !searchFlag">
                <svg-icon class="search-r" icon-class="search" size="0.35rem"></svg-icon>
            </n-button>
        </div>
        <div class="content-box">
            <SingleChatList v-if="conditionList[0]"></SingleChatList>
            <GroupChatList v-if="conditionList[1]"></GroupChatList>
            <AgreeFriend v-if="conditionList[2]"></AgreeFriend>
            <GroupChatList v-if="conditionList[3]"></GroupChatList>
        </div>
        <div class="bottom">
            <div class="button-box">
                <div style="text-align: center" @click="onSlideChange(0)"
                     :class="{active: conditionList[0]}">
                    <svg-icon icon-class="user-info" size="0.5rem"></svg-icon>
                    <div style="margin-top: -0.1rem;line-height: 0.3rem">约聊</div>
                </div>
                <div style="text-align: center" @click="onSlideChange(1)"
                     :class="{active: conditionList[1]}">
                    <svg-icon icon-class="group-info" size="0.5rem"></svg-icon>
                    <div style="margin-top: -0.1rem;line-height: 0.3rem">约盟</div>
                </div>
                <div style="text-align: center" @click="onSlideChange(2)"
                     :class="{active: conditionList[2]}">
                    <svg-icon icon-class="friend" size="0.5rem"></svg-icon>
                    <div style="margin-top: -0.1rem;line-height: 0.3rem">约友</div>
                </div>

                <div style="text-align: center" @click="onSlideChange(3)"
                     :class="{active: conditionList[3]}">
                    <svg-icon icon-class="user-i" size="0.5rem"></svg-icon>
                    <div style="margin-top: -0.1rem;line-height: 0.3rem">我</div>
                </div>
            </div>
        </div>
    </div>
    <div v-show="chat.chatType !== 0">
        <ChatArea></ChatArea>
    </div>
</template>

<script setup lang="ts">
import useStore from "@/store"
import ChatArea from "@/components/Chat/ChatArea.vue";

const {app, web, user, chat} = useStore();

const data = reactive({
    searchFlag: false,
    conditionList: [true, false, false, false],
})

const {searchFlag, conditionList} = toRefs(data)

const onSlideChange = (index: number) => {
    conditionList.value = [false, false, false, false];
    conditionList.value[index] = true;
};
</script>

<style scoped lang="scss">
.chat-box {
  width: 90%;
  height: 12rem;
  margin: 0 auto;
  border-radius: 0.25rem;
  backdrop-filter: blur(0.25rem) saturate(150%);
  border: 0.01rem solid rgba(0, 0, 0, 0.7);
  box-shadow: inset -0.01rem 0 0.1rem #161616,
  inset 0.01rem 0 0.1rem #161616;
  color: var(--main-2);

  .handler-box {
    height: 0.8rem;
    border-radius: 0.25rem 0.25rem 0 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0.02rem 0.01rem rgba(0, 0, 0, .1);

    .title {
      position: relative;
      font-size: 0.45rem;
      font-weight: bold;
      display: flex;
      justify-content: center;
      color: var(--main-1);
      line-height: 0.8rem;
    }

    .input-box {
      position: absolute;
      width: 1.7rem;
      right: 0.7rem;
      top: 0.15rem;
    }

    .right-icon {
      position: absolute;
      right: 0.2rem;
      top: 0.2rem;

      .search-r {
          color: var(--main-2);

          &:hover {
              color: var(--main-1);
          }
      }
    }
  }

  .content-box {
    width: 100%;
    height: 10rem;
    margin: 0.8rem auto 0;
    padding: 0 0.1rem;
  }

  .bottom {
    height: 1.35rem;
    width: 100%;
    border-radius: 0 0 0.25rem 0.25rem;
    position: fixed;
    top: 10.8rem;
    right: 0;
    left: 0;
    bottom: 0.1rem;
    box-shadow: 0 -0.01rem 0.01rem var(--box-shadow);
    color: var(--main-2);

    .button-box {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      justify-content: center;
      align-items: center;
      margin-top: 0.1rem;

      .active {
        color: var(--main-1);
      }
    }
  }
}
</style>